<template>
  <div class="article-list">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" v-for="(item, index) in listData" :key='index' :span="24" class="animated fadeIn">
        <el-card shadow="always">
            <h5>
              <!-- <router-link tag="el-link"  :to="{ name: 'article', query:{id:item.id}}">{{item.title}}</router-link> -->
              <el-link @click="view(item.id)" target="_blank">{{item.name}}</el-link>
            </h5>
            <el-row class="bar">
                <div class="col"><i class="el-icon-user"></i><span>作者</span><span>Mr.Yong</span></div>
                <div class="col right"><i class="el-icon-time"></i><span>发表于</span><span>{{item.create_time}}</span></div>
                <div class="col"><i class="el-icon-s-unfold"></i><span>分类</span><span><a href="#">{{item.cate_name}}</a></span> |</div>
                <div class="col"><i class="el-icon-view"></i><span>阅读量</span><span>{{item.clicks}}</span> |</div>
                <div class="col"><i class="el-icon-chat-dot-round"></i><span>评论数</span><span>{{item.comments}}</span></div>
            </el-row>
            <el-row class="desc">
                <p>{{item.description}}</p>
            </el-row>
            <el-row class="more">
                <span class="el-tag el-tag--success el-tag--mini" @click="to_tag(tag.id)" v-for="tag in item.tags" :key='tag.id' >{{tag.name}}</span>
              
              
                <!-- <el-link :href="'/info/'+item.id" type="primary" target="_blank">阅读全文 >>></el-link> -->
            </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination 
      :hide-on-single-page="true" 
      background 
      layout="prev, pager, next" 
      :total="total"
      @current-change="changeCurPage" 
      @prev-click="prevClick"
      @next-click="nextClick"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "ArticleList",
  props:{
    listData:{
      type:Array,
      default:[{}]
    },
    total:{
      type:Number,
      default:0
    },
    getArticleList:{
      type:Function,
      default:null
    }
  },
  data() {
    return {
      
    };
  },
  methods:{
    view(id) {
        this.$router.push({path: `/view/${id}`})
    },
    to_tag(id) {
        this.$router.push({path: `/tag/${id}`})
    },
    changeCurPage(val){
      this.$emit('pager', val)
    },
    prevClick(val){

    },
    nextClick(val){

    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.article-list
    width 100%
    .el-row
        width 100%
        // margin 10px 0px
        cursor pointer
        opacity 0.9
        .el-col
          margin 20px 0
          animate-duration 2s   //动画持续时间
          animate-delay 1s    //动画延迟时间
          animate-iteration-count 1    //动画执行次数
          .el-card
              width 100%
              text-align left 
              h5
                height 40px
                clear both
                display -webkit-box
                overflow hidden
                text-overflow ellipsis
                -webkit-box-orient vertical
                -webkit-line-clamp 1
                color #555
                .el-link
                  font-size 26px
                  font-weight 400
              .bar
                  width 100%
                  font-size 12px
                  color #999
                  padding 10px 0
                  .col
                      display inline-block
                      i
                          margin-right 5px
                      span
                          margin-right 5px
              .desc
                  width 100%
                  color #555
                  font-size 16px
                  line-height 2
                  padding 10px 0
                  p
                      display block;
                      height 70px;
                      overflow hidden
                      text-overflow: -o-ellipsis-lastline;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      line-clamp: 2;
                      -webkit-box-orient: vertical;
              .more
                  text-align left  
                  font-size 12px
                  color #999
                  .el-tag
                    margin-left 5px;
                  .el-link
                    font-size 16px
.article-list .el-col .el-card >>> h5
  height 40px
  clear both
  display -webkit-box
  overflow hidden
  text-overflow ellipsis
  -webkit-box-orient vertical
  -webkit-line-clamp 1
</style>
